<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title><%= distro %> <%= version %> | <%= [group_title, subgroup_title, topic_title].compact.join(' | ') %></title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <%= render("_templates/_css.html.erb", :css_path => css_path) %>

   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <![endif]-->

  <link href="http://manageiq.org/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <!--[if IE]><link rel="shortcut icon" href="http://manageiq.org/images/favicon.ico"><![endif]-->
  <meta content="ManageIQ Documentation" name="application-name">
</head>
<body>
  <div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="http://manageiq.org/"><img alt="ManageIQ Documentation" src="http://manageiq.org/images/logo/manageiq-logo-standard.svg"></a>
      </div>
    </div>
  </div>
  <div class="container">
    <p class="toggle-nav visible-xs pull-left">
      <button class="btn btn-default btn-sm" type="button" data-toggle="offcanvas">Toggle nav</button>
    </p>
    <ol class="breadcrumb">
      <li class="sitename">
        <a href="<%= site_home_path %>"><%= site_name %></a>
      </li>
      <li class="hidden-xs active">
        <%= breadcrumb_root %>
      </li>
      <li class="hidden-xs active">
        <%= breadcrumb_group %>
      </li>
      <%= breadcrumb_subgroup_block %>
      <li class="hidden-xs active">
        <%= breadcrumb_topic %>
      </li>
    </ol>
    <div class="row row-offcanvas row-offcanvas-left">
      <div class="col-xs-8 col-sm-3 col-md-3 sidebar sidebar-offcanvas">
        <%= render("_templates/_nav.html.erb", :navigation => navigation, :group_id => group_id, :topic_id => topic_id, :subgroup_id => subgroup_id, :subtopic_shim => subtopic_shim) %>
      </div>
      <div class="col-xs-12 col-sm-9 col-md-9 main">
        <div class="page-header">
          <h2><%= article_title %></h2>
        </div>
        <%= content %>
      </div>
    </div>
  </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script type="text/javascript">
    /*<![CDATA[*/
    $(document).ready(function() {
      $("[id^='topicGroup']").on('show.bs.collapse', function (event) {
        if (!($(event.target).attr('id').match(/^topicSubGroup/))) {
          $(this).parent().find("[id^='tgSpan']").toggleClass("fa-angle-right fa-angle-down");
        }
      });
      $("[id^='topicGroup']").on('hide.bs.collapse', function (event) {
        if (!($(event.target).attr('id').match(/^topicSubGroup/))) {
          $(this).parent().find("[id^='tgSpan']").toggleClass("fa-angle-right fa-angle-down");
        }
      });
      $("[id^='topicSubGroup']").on('show.bs.collapse', function () {
        $(this).parent().find("[id^='sgSpan']").toggleClass("fa-caret-right fa-caret-down");
      });
      $("[id^='topicSubGroup']").on('hide.bs.collapse', function () {
        $(this).parent().find("[id^='sgSpan']").toggleClass("fa-caret-right fa-caret-down");
      });
    });
    /*]]>*/
  </script>
</body>
</html>
